<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>DatePickerPro 日期选择器 | Vue DevUI</title>
    <meta name="description" content="Vue DevUI 组件库">
    <link rel="stylesheet" href="/assets/style.b884dd64.css">
    <link rel="modulepreload" href="/assets/Home.e734a50d.js">
    <link rel="modulepreload" href="/assets/AlgoliaSearchBox.e66f60b3.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="modulepreload" href="/assets/components_date-picker-pro_index.md.a354c050.lean.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
    <meta name="twitter:title" content="DatePickerPro 日期选择器 | Vue DevUI">
    <meta property="og:title" content="DatePickerPro 日期选择器 | Vue DevUI">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-4bb0db66><div class="nav-bar-inner" data-v-4bb0db66><div class="sidebar-button" data-v-4bb0db66><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" aria-label="Vue DevUI, back to home" data-v-4bb0db66 data-v-4d0f7fcc><img class="logo" src="/../../assets/logo.svg" alt="Logo" data-v-4d0f7fcc><span data-v-4d0f7fcc>Vue DevUI</span></a><!--[--><!--[--><div id="docsearch" multilang="false"></div><!--]--><!--]--><div class="flex-grow" data-v-4bb0db66></div><div class="flex items-center" data-v-4bb0db66><div class="nav" data-v-4bb0db66><nav class="nav-links" data-v-4bb0db66 data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav></div><div class="custom-nav flex items-center ml-l" data-v-4bb0db66><!----><!----><div class="custom-nav-item flex items-center ml-m" data-v-4bb0db66><!--[--><span class="devui-popper-trigger"><svg class="icon-theme" viewbox="0 0 1024 1024" width="16" height="16" data-v-6fec2a10><path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z" data-v-6fec2a10></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><a class="custom-nav-item ml-m" style="font-size:0;user-select:none;" href="https://github.com/DevCloudFE/vue-devui" target="_blank" data-v-4bb0db66><svg viewBox="0 0 20 20" width="18" height="18" data-v-4bb0db66><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" data-v-4bb0db66></path></svg></a></div></div></div></header><aside class="sidebar" data-v-06a2164a><nav class="nav-links nav" data-v-06a2164a data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-06a2164a><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/quick-start/"><!----><span class="sidebar-link-text">快速开始<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/on-demand/"><!----><span class="sidebar-link-text">按需引入<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/theme-guide/"><!----><span class="sidebar-link-text">主题定制<!----></span></a><!----></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">通用<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button/"><!----><span class="sidebar-link-text">Button 按钮<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/fullscreen/"><!----><span class="sidebar-link-text">Fullscreen 全屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon/"><!----><span class="sidebar-link-text">Icon 图标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/overlay/"><!----><span class="sidebar-link-text">Overlay 遮罩层<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/panel/"><!----><span class="sidebar-link-text">Panel 面板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/ripple/"><!----><span class="sidebar-link-text">Ripple 水波纹<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/search/"><!----><span class="sidebar-link-text">Search 搜索框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/status/"><!----><span class="sidebar-link-text">Status 状态<!----></span></a><!----></li><!----><!----></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">导航<!----></span></p><ul class="sidebar-links"><!----><!----><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dropdown/"><!----><span class="sidebar-link-text">Dropdown 下拉菜单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/menu/"><!----><span class="sidebar-link-text">Menu 菜单<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/pagination/"><!----><span class="sidebar-link-text">Pagination 分页<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tabs/"><!----><span class="sidebar-link-text">Tabs 选项卡<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">反馈<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/alert/"><!----><span class="sidebar-link-text">Alert 警告<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/drawer/"><!----><span class="sidebar-link-text">Drawer 抽屉板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/loading/"><!----><span class="sidebar-link-text">Loading 加载提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/message/"><!----><span class="sidebar-link-text">Message 全局提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/modal/"><!----><span class="sidebar-link-text">Modal 弹窗<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/notification/"><!----><span class="sidebar-link-text">Notification 全局通知<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/popover/"><!----><span class="sidebar-link-text">Popover 悬浮提示<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/result/"><!----><span class="sidebar-link-text">Result 结果<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tooltip/"><!----><span class="sidebar-link-text">Tooltip 提示<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据录入<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/auto-complete/"><!----><span class="sidebar-link-text">AutoComplete 自动补全<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/checkbox/"><!----><span class="sidebar-link-text">Checkbox 复选框<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item active" href="/components/date-picker-pro/"><!----><span class="sidebar-link-text">DatePickerPro 日期选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editable-select/"><!----><span class="sidebar-link-text">EditableSelect 可输入下拉选择框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/form/"><!----><span class="sidebar-link-text">Form 表单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input/"><!----><span class="sidebar-link-text">Input 输入框<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-number/"><!----><span class="sidebar-link-text">InputNumber 数字输入框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/mention/"><!----><span class="sidebar-link-text">Mention 提及<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/radio/"><!----><span class="sidebar-link-text">Radio 单选框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/select/"><!----><span class="sidebar-link-text">Select 下拉框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/slider/"><!----><span class="sidebar-link-text">Slider 滑块<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/switch/"><!----><span class="sidebar-link-text">Switch 开关<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/textarea/"><!----><span class="sidebar-link-text">Textarea 多行文本框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-picker/"><!----><span class="sidebar-link-text">TimePicker 时间选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-select/"><!----><span class="sidebar-link-text">TimeSelect 时间选择器<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/upload/"><!----><span class="sidebar-link-text">Upload 上传<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据展示<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatar/"><!----><span class="sidebar-link-text">Avatar 头像<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/badge/"><!----><span class="sidebar-link-text">Badge 徽标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/card/"><!----><span class="sidebar-link-text">Card 卡片<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/collapse/"><!----><span class="sidebar-link-text">Collapse 折叠面板<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/countdown/"><!----><span class="sidebar-link-text">Countdown 倒计时<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-preview/"><!----><span class="sidebar-link-text">ImagePreview 图片预览<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/progress/"><!----><span class="sidebar-link-text">Progress 进度条<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/rate/"><!----><span class="sidebar-link-text">Rate 评分<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/skeleton/"><!----><span class="sidebar-link-text">Skeleton 骨架屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/statistic/"><!----><span class="sidebar-link-text">Statistic 统计数值<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/steps/"><!----><span class="sidebar-link-text">Steps 步骤条<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/table/"><!----><span class="sidebar-link-text">Table 表格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tag/"><!----><span class="sidebar-link-text">Tag 标签<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/timeline/"><!----><span class="sidebar-link-text">Timeline 时间轴<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tree/"><!----><span class="sidebar-link-text">Tree 树<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">布局<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/grid/"><!----><span class="sidebar-link-text">Grid 栅格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/layout/"><!----><span class="sidebar-link-text">Layout 布局<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/splitter/"><!----><span class="sidebar-link-text">Splitter 分割器<!----></span></a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-35e0cb6b><div class="container" data-v-35e0cb6b><!--[--><!--]--><div style="position:relative;" class="content" data-v-35e0cb6b><div><h1 id="datepickerpro-日期选择器" tabindex="-1">DatePickerPro 日期选择器 <a class="header-anchor" href="#datepickerpro-日期选择器" aria-hidden="true">#</a></h1><p>输入或选择日期的组件。</p><h4 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-hidden="true">#</a></h4><p>当用户需要输入一个日期时；需要点击标准输入框，弹出日期面板进行选择时。</p><h3 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="picker-pro-format-demo mr30"><div class="mb10">Small</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--sm" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div></div><div class="picker-pro-format-demo mr30"><div class="mb10">Middle</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div></div><div class="picker-pro-format-demo mr30"><div class="mb10">Large</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--lg" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-pro-format-demo mr30<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-pro-format-demo mr30<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-pro-format-demo mr30<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> datePickerProValue <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> datePickerProValue2 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> datePickerProValue3 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      datePickerProValue<span class="token punctuation">,</span>
      datePickerProValue2<span class="token punctuation">,</span>
      datePickerProValue3<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.mb20</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.wh250</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="显示时间" tabindex="-1">显示时间 <a class="header-anchor" href="#显示时间" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>YYYY/MM/DD HH:mm:ss<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> datePickerProValue1 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      datePickerProValue1<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="自定义日历面板区域" tabindex="-1">自定义日历面板区域 <a class="header-anchor" href="#自定义日历面板区域" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="mb10">right area</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div><div class="mb10">footer</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>right area<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#rightArea</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rightArea<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date-picker-right-panel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span>
              <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
                () =&gt; {
                  setDate(-30);
                }
              <span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">&gt;</span></span>
              一个月前
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ getDateString(-30) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span>
              <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
                () =&gt; {
                  setDate(-14);
                }
              <span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">&gt;</span></span>
              两周前
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ getDateString(-14) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span>
              <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
                () =&gt; {
                  setDate(-7);
                }
              <span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">&gt;</span></span>
              一周前
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ getDateString(-7) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span>
              <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
                () =&gt; {
                  setDate(0);
                }
              <span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">&gt;</span></span>
              今天
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ getDateString(0) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-date-picker-pro</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date-picker-footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>setToday<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 今天 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearDate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 清除时间 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-date-picker-pro</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> datePickerProValue1 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string <span class="token operator">|</span> Date<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> datePickerProValue2 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string <span class="token operator">|</span> Date<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">setDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">days</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      datePickerProValue1<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> days <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">3600</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">getDateString</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">days</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> days <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">3600</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">月</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">日</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">setToday</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      datePickerProValue2<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">clearDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      datePickerProValue2<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      datePickerProValue1<span class="token punctuation">,</span>
      datePickerProValue2<span class="token punctuation">,</span>
      setDate<span class="token punctuation">,</span>
      getDateString<span class="token punctuation">,</span>
      setToday<span class="token punctuation">,</span>
      clearDate<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.date-picker-right-panel</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token selector">li</span> <span class="token punctuation">{</span>
    <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token selector">button</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 66px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">span</span> <span class="token punctuation">{</span>
      <span class="token property">margin-left</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector">.date-picker-footer</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
  <span class="token selector">button</span> <span class="token punctuation">{</span>
    <span class="token property">margin-left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="日期格式" tabindex="-1">日期格式 <a class="header-anchor" href="#日期格式" aria-hidden="true">#</a></h3><p>通过<code>format</code>指定输入框显示的日期格式, 详见 <a href="#format">Format</a></p><p>例如：<code>YYYY-MM-DD</code></p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="picker-pro-format-demo mr30"><div class="mb10">日期格式： YYYY-MM-DD</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div></div><div class="picker-pro-format-demo"><div class="mb10">日期格式： YYYY-MM-DD HH:mm:ss</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-pro-format-demo mr30<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>日期格式： YYYY-MM-DD<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pickerProFormatValue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>YYYY-MM-DD<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-pro-format-demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>日期格式： YYYY-MM-DD HH:mm:ss<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pickerProFormatValue1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>YYYY-MM-DD HH:mm:ss<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> pickerProFormatValue <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> pickerProFormatValue1 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      pickerProFormatValue<span class="token punctuation">,</span>
      pickerProFormatValue1<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.picker-pro-format-demo</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.mr30</span> <span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.mb10</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="年月选择器" tabindex="-1">年月选择器 <a class="header-anchor" href="#年月选择器" aria-hidden="true">#</a></h3><p>通过<code>type</code>指定选择器类型</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="picker-pro-format-demo mr30"><div class="mb10">year picker</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div><div class="mb10">month picker</div><div class="devui-date-picker-pro mb20 wh250"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-pro-format-demo mr30<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>year picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pickerProFormatValue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>month picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pickerProFormatValue1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> pickerProFormatValue <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> pickerProFormatValue1 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      pickerProFormatValue<span class="token punctuation">,</span>
      pickerProFormatValue1<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="范围选择器" tabindex="-1">范围选择器 <a class="header-anchor" href="#范围选择器" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="mb10">basic range picker</div><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-width mb20"><div class="devui-range-date-picker-pro__range-picker"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div><div class="mb10">time range picker</div><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-time-width mb20"><div class="devui-range-date-picker-pro__range-picker"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div><div class="mb10">year range picker</div><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-width mb20 wh250"><div class="devui-range-date-picker-pro__range-picker"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div><div class="mb10">month range picker</div><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-width mb20 wh250"><div class="devui-range-date-picker-pro__range-picker"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>basic range picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rangeDatePickerProValue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>time range picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rangeDatePickerProValue1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>YYYY/MM/DD HH:mm:ss<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>year range picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rangeDatePickerProValue2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>month range picker<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rangeDatePickerProValue3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> rangeDatePickerProValue <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> rangeDatePickerProValue1 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> rangeDatePickerProValue2 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> rangeDatePickerProValue3 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      rangeDatePickerProValue<span class="token punctuation">,</span>
      rangeDatePickerProValue1<span class="token punctuation">,</span>
      rangeDatePickerProValue2<span class="token punctuation">,</span>
      rangeDatePickerProValue3<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="自定义日期范围面板区域" tabindex="-1">自定义日期范围面板区域 <a class="header-anchor" href="#自定义日期范围面板区域" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="mb10">right area</div><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-time-width mb20 wh250"><div class="devui-range-date-picker-pro__range-picker"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div><div class="mb10">footer</div><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-time-width mb20 wh250"><div class="devui-range-date-picker-pro__range-picker"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>right area<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#rightArea</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rightArea<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date-picker-right-panel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span>
              <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
                () =&gt; {
                  setDate(-30);
                }
              <span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">&gt;</span></span>
              一个月前
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span>
              <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
                () =&gt; {
                  setDate(-14);
                }
              <span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">&gt;</span></span>
              一周前
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span>
              <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
                () =&gt; {
                  selectThisWeek();
                }
              <span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">&gt;</span></span>
              当前周
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-range-date-picker-pro</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footerCustom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:showTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date-picker-footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearStartDate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 清除开始时间 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>secondary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearEndDate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 清除结束时间 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-range-date-picker-pro</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> datePickerProValue1 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string <span class="token operator">|</span> Date<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> datePickerProValue2 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string <span class="token operator">|</span> Date<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">setDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">days</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      datePickerProValue1<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> days <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">3600</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">selectThisWeek</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> tody <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span>tody<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> tody<span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> end <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span>start<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      datePickerProValue1<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span>start<span class="token punctuation">,</span> end<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> footerCustom <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">clearStartDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>start<span class="token punctuation">,</span> end<span class="token punctuation">]</span> <span class="token operator">=</span> datePickerProValue2<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      datePickerProValue2<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> end<span class="token punctuation">]</span><span class="token punctuation">;</span>
      footerCustom<span class="token operator">?.</span>value<span class="token punctuation">.</span><span class="token function">focusChange</span><span class="token punctuation">(</span><span class="token string">&#39;start&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">clearEndDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>start<span class="token punctuation">,</span> end<span class="token punctuation">]</span> <span class="token operator">=</span> datePickerProValue2<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      datePickerProValue2<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span>start<span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      footerCustom<span class="token operator">?.</span>value<span class="token punctuation">.</span><span class="token function">focusChange</span><span class="token punctuation">(</span><span class="token string">&#39;end&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      datePickerProValue1<span class="token punctuation">,</span>
      datePickerProValue2<span class="token punctuation">,</span>
      setDate<span class="token punctuation">,</span>
      selectThisWeek<span class="token punctuation">,</span>
      footerCustom<span class="token punctuation">,</span>
      clearStartDate<span class="token punctuation">,</span>
      clearEndDate<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="禁用选择器" tabindex="-1">禁用选择器 <a class="header-anchor" href="#禁用选择器" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-date-picker-pro mb20 wh250 mr30"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper devui-input--disabled"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value disabled class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-width mb20 wh250"><div class="devui-range-date-picker-pro__range-picker devui-range-date-picker-pro--disabled"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper devui-input--disabled"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value disabled class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper devui-input--disabled"><input value disabled class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250 mr30<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> datePickerProValue1 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> datePickerProValue2 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      datePickerProValue1<span class="token punctuation">,</span>
      datePickerProValue2<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="设置日历面板可选时间范围" tabindex="-1">设置日历面板可选时间范围 <a class="header-anchor" href="#设置日历面板可选时间范围" aria-hidden="true">#</a></h3><p>添加 <code>calendarRange</code> 属性设置选择器日历面板显示的时间范围。 添加 <code>limitDateRange</code> 属性设置选择器日历面板可选择的时间范围。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-date-picker-pro mb20 wh250 mr30"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-width mb20 wh250"><div class="devui-range-date-picker-pro__range-picker"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250 mr30<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:calendarRange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[2022, 2025]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:limitDateRange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>limitDateRange<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span>
    <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerProValue2<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb20 wh250<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:calendarRange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[2022, 2025]<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:limitDateRange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>limitDateRange<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> datePickerProValue1 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> datePickerProValue2 <span class="token operator">=</span> ref<span class="token operator">&lt;</span>string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> limitDateRange <span class="token operator">=</span> ref<span class="token operator">&lt;</span>Date<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2022</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2023</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      datePickerProValue1<span class="token punctuation">,</span>
      datePickerProValue2<span class="token punctuation">,</span>
      limitDateRange<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="datepickerpro-参数" tabindex="-1">DatePickerPro 参数 <a class="header-anchor" href="#datepickerpro-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">v-model</td><td style="text-align:left;"><code>Date</code></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">必选，选中项绑定的值</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">format</td><td style="text-align:left;"><a href="#format">Format</a></td><td style="text-align:left;">&#39;YYYY/MM/DD&#39; | &#39;YYYY/MM/DD HH:mm:ss&#39;</td><td style="text-align:left;">可选，绑定值的日期格式，根据是否 showTime 区别不同默认值</td><td style="text-align:left;"><a href="#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F">日期格式</a></td></tr><tr><td style="text-align:left;">placeholder</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;请选择日期&#39;</td><td style="text-align:left;">可选，输入框的 placeholder</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">showTime</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否显示时分秒</td><td style="text-align:left;"><a href="#%E6%98%BE%E7%A4%BA%E6%97%B6%E9%97%B4">显示时间</a></td></tr><tr><td style="text-align:left;">size</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;md&#39;</td><td style="text-align:left;">可选，输入框的尺寸</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">disabled</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否禁用选择器</td><td style="text-align:left;"><a href="#%E7%A6%81%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8">禁用选择器</a></td></tr><tr><td style="text-align:left;">calendarRange</td><td style="text-align:left;"><code>[number,number]</code></td><td style="text-align:left;">[1970, 2099]</td><td style="text-align:left;">可选，设置日历面板显示时间范围</td><td style="text-align:left;"><a href="#%E8%AE%BE%E7%BD%AE%E6%97%A5%E5%8E%86%E9%9D%A2%E6%9D%BF%E5%8F%AF%E9%80%89%E6%97%B6%E9%97%B4%E8%8C%83%E5%9B%B4">设置日历面板可选时间范围</a></td></tr><tr><td style="text-align:left;">limitDateRange</td><td style="text-align:left;"><code>[Date,Date]</code></td><td style="text-align:left;">[new Date(calendarRange[0]), new Date(calendarRange[1])]</td><td style="text-align:left;">可选，设置日历面板可选时间范围</td><td style="text-align:left;"><a href="#%E8%AE%BE%E7%BD%AE%E6%97%A5%E5%8E%86%E9%9D%A2%E6%9D%BF%E5%8F%AF%E9%80%89%E6%97%B6%E9%97%B4%E8%8C%83%E5%9B%B4">设置日历面板可选时间范围</a></td></tr><tr><td style="text-align:left;">type</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;date&#39;</td><td style="text-align:left;">可选，设置日期选择器类型(date/year/month)</td><td style="text-align:left;"><a href="#%E5%B9%B4%E6%9C%88%E9%80%89%E6%8B%A9%E5%99%A8">年月选择器</a></td></tr></tbody></table><h3 id="datepickerpro-事件" tabindex="-1">DatePickerPro 事件 <a class="header-anchor" href="#datepickerpro-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">toggleChange</td><td style="text-align:left;"><code>(bool: boolean) =&gt; void</code></td><td style="text-align:left;">可选，选择器打开关闭 toggle 事件</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">confirmEvent</td><td style="text-align:left;"><code>(date: Date) =&gt; void</code></td><td style="text-align:left;">可选，用户确定选定的值时触发</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">focus</td><td style="text-align:left;"><code>(e: MouseEvent) =&gt; void</code></td><td style="text-align:left;">可选，输入框获取焦点时触发</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">blur</td><td style="text-align:left;"><code>() =&gt; void</code></td><td style="text-align:left;">可选，输入框失去焦点时触发</td><td style="text-align:left;"></td></tr></tbody></table><h3 id="datepickerpro-插槽" tabindex="-1">DatePickerPro 插槽 <a class="header-anchor" href="#datepickerpro-插槽" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">名称</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">rightArea</td><td style="text-align:left;">自定义 DatePickerPro 日历面板右侧内容， 如：日期快捷选项</td><td style="text-align:left;"><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%97%A5%E5%8E%86%E9%9D%A2%E6%9D%BF%E5%8C%BA%E5%9F%9F">自定义日历面板区域</a></td></tr><tr><td style="text-align:left;">footer</td><td style="text-align:left;">自定义 DatePickerPro 日历面板下侧内容</td><td style="text-align:left;"><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%97%A5%E5%8E%86%E9%9D%A2%E6%9D%BF%E5%8C%BA%E5%9F%9F">自定义日历面板区域</a></td></tr></tbody></table><h3 id="datepickerpro-类型定义" tabindex="-1">DatePickerPro 类型定义 <a class="header-anchor" href="#datepickerpro-类型定义" aria-hidden="true">#</a></h3><h4 id="format" tabindex="-1">Format <a class="header-anchor" href="#format" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">Format</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</code></pre></div><p>日期格式 <code>format</code> 支持的标识列表</p><table><thead><tr><th style="text-align:left;">标识</th><th style="text-align:left;">示例</th><th style="text-align:left;">描述</th></tr></thead><tbody><tr><td style="text-align:left;">YY</td><td style="text-align:left;">22</td><td style="text-align:left;">年，两位数</td></tr><tr><td style="text-align:left;">YYYY</td><td style="text-align:left;">2022</td><td style="text-align:left;">年，四位数</td></tr><tr><td style="text-align:left;">M</td><td style="text-align:left;">1-12</td><td style="text-align:left;">月，从 1 开始</td></tr><tr><td style="text-align:left;">MM</td><td style="text-align:left;">01-12</td><td style="text-align:left;">月，两位数字</td></tr><tr><td style="text-align:left;">MMM</td><td style="text-align:left;">Jan-Dec</td><td style="text-align:left;">月，英文缩写</td></tr><tr><td style="text-align:left;">D</td><td style="text-align:left;">1-31</td><td style="text-align:left;">日</td></tr><tr><td style="text-align:left;">DD</td><td style="text-align:left;">01-31</td><td style="text-align:left;">日，两位数</td></tr><tr><td style="text-align:left;">H</td><td style="text-align:left;">0-23</td><td style="text-align:left;">24 小时</td></tr><tr><td style="text-align:left;">HH</td><td style="text-align:left;">00-23</td><td style="text-align:left;">24 小时，两位数</td></tr><tr><td style="text-align:left;">h</td><td style="text-align:left;">1-12</td><td style="text-align:left;">12 小时</td></tr><tr><td style="text-align:left;">hh</td><td style="text-align:left;">01-12</td><td style="text-align:left;">12 小时，两位数</td></tr><tr><td style="text-align:left;">m</td><td style="text-align:left;">0-59</td><td style="text-align:left;">分钟</td></tr><tr><td style="text-align:left;">mm</td><td style="text-align:left;">00-59</td><td style="text-align:left;">分钟，两位数</td></tr><tr><td style="text-align:left;">s</td><td style="text-align:left;">0-59</td><td style="text-align:left;">秒</td></tr><tr><td style="text-align:left;">ss</td><td style="text-align:left;">00-59</td><td style="text-align:left;">秒，两位数</td></tr></tbody></table><h3 id="rangedatepickerpro-参数" tabindex="-1">RangeDatePickerPro 参数 <a class="header-anchor" href="#rangedatepickerpro-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">v-model</td><td style="text-align:left;"><code>[Date, Date]</code></td><td style="text-align:left;">[&#39;&#39;,&#39;&#39;]</td><td style="text-align:left;">必选，选中项绑定的值</td><td style="text-align:left;"><a href="#%E8%8C%83%E5%9B%B4%E9%80%89%E6%8B%A9%E5%99%A8">范围选择器</a></td></tr><tr><td style="text-align:left;">format</td><td style="text-align:left;"><a href="#format">Format</a></td><td style="text-align:left;">&#39;YYYY/MM/DD&#39; | &#39;YYYY/MM/DD HH:mm:ss&#39;</td><td style="text-align:left;">可选，绑定值的日期格式，根据是否 showTime 区别不同默认值</td><td style="text-align:left;"><a href="#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F">日期格式</a></td></tr><tr><td style="text-align:left;">placeholder</td><td style="text-align:left;"><code>Array</code></td><td style="text-align:left;">[&#39;请选择开始日期&#39;, &#39;请选择结束日期&#39;]</td><td style="text-align:left;">可选，输入框的 placeholder</td><td style="text-align:left;"><a href="#%E8%8C%83%E5%9B%B4%E9%80%89%E6%8B%A9%E5%99%A8">范围选择器</a></td></tr><tr><td style="text-align:left;">showTime</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否显示时分秒</td><td style="text-align:left;"><a href="#%E8%8C%83%E5%9B%B4%E9%80%89%E6%8B%A9%E5%99%A8">范围选择器</a></td></tr><tr><td style="text-align:left;">separator</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;-&#39;</td><td style="text-align:left;">可选，范围选择器的分割符</td><td style="text-align:left;"><a href="#%E8%8C%83%E5%9B%B4%E9%80%89%E6%8B%A9%E5%99%A8">范围选择器</a></td></tr><tr><td style="text-align:left;">size</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;md&#39;</td><td style="text-align:left;">可选，输入框的尺寸</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">disabled</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否禁用选择器</td><td style="text-align:left;"><a href="#%E7%A6%81%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8">禁用选择器</a></td></tr><tr><td style="text-align:left;">calendarRange</td><td style="text-align:left;"><code>[number,number]</code></td><td style="text-align:left;">[1970,2099]</td><td style="text-align:left;">可选，设置日历面板显示时间范围</td><td style="text-align:left;"><a href="#%E8%AE%BE%E7%BD%AE%E6%97%A5%E5%8E%86%E9%9D%A2%E6%9D%BF%E5%8F%AF%E9%80%89%E6%97%B6%E9%97%B4%E8%8C%83%E5%9B%B4">设置日历面板可选时间范围</a></td></tr><tr><td style="text-align:left;">limitDateRange</td><td style="text-align:left;"><code>[Date,Date]</code></td><td style="text-align:left;">[new Date(calendarRange[0]), new Date(calendarRange[1])]</td><td style="text-align:left;">可选，设置日历面板可选时间范围</td><td style="text-align:left;"><a href="#%E8%AE%BE%E7%BD%AE%E6%97%A5%E5%8E%86%E9%9D%A2%E6%9D%BF%E5%8F%AF%E9%80%89%E6%97%B6%E9%97%B4%E8%8C%83%E5%9B%B4">设置日历面板可选时间范围</a></td></tr><tr><td style="text-align:left;">type</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;date&#39;</td><td style="text-align:left;">可选，设置日期选择器类型(date/year/month)</td><td style="text-align:left;"><a href="#%E8%8C%83%E5%9B%B4%E9%80%89%E6%8B%A9%E5%99%A8">范围选择器</a></td></tr></tbody></table><h3 id="rangedatepickerpro-事件" tabindex="-1">RangeDatePickerPro 事件 <a class="header-anchor" href="#rangedatepickerpro-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">toggleChange</td><td style="text-align:left;"><code>(bool: boolean) =&gt; void</code></td><td style="text-align:left;">可选，选择器打开关闭 toggle 事件</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">confirmEvent</td><td style="text-align:left;"><code>(date: Date[]) =&gt; void</code></td><td style="text-align:left;">可选，用户确定选定的时间范围时触发</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">focus</td><td style="text-align:left;"><code>(e: MouseEvent) =&gt; void</code></td><td style="text-align:left;">可选，输入框获取焦点时触发</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">blur</td><td style="text-align:left;"><code>() =&gt; void</code></td><td style="text-align:left;">可选，输入框失去焦点时触发</td><td style="text-align:left;"></td></tr></tbody></table><h3 id="rangedatepickerpro-插槽" tabindex="-1">RangeDatePickerPro 插槽 <a class="header-anchor" href="#rangedatepickerpro-插槽" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">名称</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">rightArea</td><td style="text-align:left;">自定义 RangeDatePickerPro 日历面板右侧内容， 如：日期范围快捷选项</td><td style="text-align:left;"><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%97%A5%E6%9C%9F%E8%8C%83%E5%9B%B4%E9%9D%A2%E6%9D%BF%E5%8C%BA%E5%9F%9F">自定义日期范围面板区域</a></td></tr><tr><td style="text-align:left;">footer</td><td style="text-align:left;">自定义 RangeDatePickerPro 日历面板下侧内容</td><td style="text-align:left;"><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%97%A5%E6%9C%9F%E8%8C%83%E5%9B%B4%E9%9D%A2%E6%9D%BF%E5%8C%BA%E5%9F%9F">自定义日期范围面板区域</a></td></tr></tbody></table></div></div><div data-v-35e0cb6b><div class="page-contributor-label" data-v-35e0cb6b>Contributors</div><div class="page-contributor" data-v-35e0cb6b data-v-36223ac2><!--[--><a href="https://github.com/daviForevel" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/39021499?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/jecyu" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/28448589?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/jCodeLife" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/50767049?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/hxj9102" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/58357112?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><!--]--></div></div><footer class="page-footer" data-v-35e0cb6b data-v-63a8fcc6><div class="edit" data-v-63a8fcc6><div class="edit-link" data-v-63a8fcc6 data-v-084d37fe><!----></div></div><div class="updated" data-v-63a8fcc6><!----></div></footer><div class="next-and-prev-link" data-v-35e0cb6b data-v-1443c067><div class="container" data-v-1443c067><div class="prev" data-v-1443c067><a class="link" href="/components/checkbox/" data-v-1443c067><svg t="1637469990202" class="icon icon icon-prev" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5081" width="16" height="16" data-v-1443c067><path d="M277.92 512.064c0 8.128 3.072 16.224 9.28 22.4l362.336 362.336a31.808 31.808 0 0 0 45.12-0.128 31.904 31.904 0 0 0 0.128-45.12L355.2 512 694.72 172.448a31.808 31.808 0 0 0-0.128-45.12 31.904 31.904 0 0 0-45.12-0.128L287.232 489.536a31.616 31.616 0 0 0-9.312 22.4l0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="5082"></path></svg><span class="text" data-v-1443c067>Checkbox 复选框</span></a></div><div class="next" data-v-1443c067><a class="link" href="/components/editable-select/" data-v-1443c067><span class="text" data-v-1443c067>EditableSelect 可输入下拉选择框</span><svg t="1637469947735" class="icon icon icon-next" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4917" width="16" height="16" data-v-1443c067><path d="M746.08 512.064a31.584 31.584 0 0 1-9.28 22.4L374.464 896.8a31.808 31.808 0 0 1-45.12-0.128 31.904 31.904 0 0 1-0.128-45.12L668.8 512 329.28 172.448a31.808 31.808 0 0 1 0.128-45.12 31.904 31.904 0 0 1 45.12-0.128l362.304 362.336c6.208 6.176 9.28 14.272 9.312 22.4l-0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="4918"></path></svg></a></div></div></div><!--[--><!--]--><!----><aside class="toc-warpper" data-v-35e0cb6b data-v-38776bfe><nav class="devui-content-nav" data-v-38776bfe><h3 class="devui-fast-forward" data-v-38776bfe>快速前往</h3><ul class="devui-step-nav" data-v-38776bfe><!--[--><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#基本用法" title="基本用法" data-v-38776bfe>基本用法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#显示时间" title="显示时间" data-v-38776bfe>显示时间</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#自定义日历面板区域" title="自定义日历面板区域" data-v-38776bfe>自定义日历面板区域</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#日期格式" title="日期格式" data-v-38776bfe>日期格式</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#年月选择器" title="年月选择器" data-v-38776bfe>年月选择器</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#范围选择器" title="范围选择器" data-v-38776bfe>范围选择器</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#自定义日期范围面板区域" title="自定义日期范围面板区域" data-v-38776bfe>自定义日期范围面板区域</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#禁用选择器" title="禁用选择器" data-v-38776bfe>禁用选择器</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#设置日历面板可选时间范围" title="设置日历面板可选时间范围" data-v-38776bfe>设置日历面板可选时间范围</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#datepickerpro-参数" title="DatePickerPro 参数" data-v-38776bfe>DatePickerPro 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#datepickerpro-事件" title="DatePickerPro 事件" data-v-38776bfe>DatePickerPro 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#datepickerpro-插槽" title="DatePickerPro 插槽" data-v-38776bfe>DatePickerPro 插槽</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#datepickerpro-类型定义" title="DatePickerPro 类型定义" data-v-38776bfe>DatePickerPro 类型定义</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#rangedatepickerpro-参数" title="RangeDatePickerPro 参数" data-v-38776bfe>RangeDatePickerPro 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#rangedatepickerpro-事件" title="RangeDatePickerPro 事件" data-v-38776bfe>RangeDatePickerPro 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#rangedatepickerpro-插槽" title="RangeDatePickerPro 插槽" data-v-38776bfe>RangeDatePickerPro 插槽</a></li><!--]--></ul><div class="devui-marker" data-v-38776bfe></div></nav></aside></div></main></div><!----><!----><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_accordion_index.md\":\"a92e3443\",\"components_alert_index.md\":\"c7702e03\",\"components_anchor_index.md\":\"f7333cbb\",\"components_auto-complete_index.md\":\"4de98e8d\",\"components_avatar_index.md\":\"69aa04d5\",\"components_back-top_index.md\":\"d1ab787c\",\"components_badge_index.md\":\"e4750848\",\"components_breadcrumb_index.md\":\"c976c02b\",\"components_button_index.md\":\"5ad2976d\",\"components_card_index.md\":\"07ffbefa\",\"components_carousel_index.md\":\"f88f0b13\",\"components_cascader_index.md\":\"ee34cce7\",\"components_checkbox_index.md\":\"3ec7d7a1\",\"components_collapse_index.md\":\"9f2cbd98\",\"components_color-picker_index.md\":\"76658b37\",\"components_comment_index.md\":\"7f6ae658\",\"components_countdown_index.md\":\"556b68b1\",\"components_date-picker-pro_index.md\":\"a354c050\",\"components_date-picker_index.md\":\"00801143\",\"components_dragdrop_index.md\":\"27ca48b1\",\"components_drawer_index.md\":\"f1f95db0\",\"components_dropdown_index.md\":\"2e85d37e\",\"components_editable-select_index.md\":\"dfceeabe\",\"components_form_index.md\":\"aa7415f4\",\"components_fullscreen_index.md\":\"91a2fd77\",\"components_gantt_index.md\":\"c7536435\",\"components_grid_index.md\":\"646531b7\",\"components_icon_index.md\":\"b13a05fb\",\"components_image-preview_index.md\":\"6064aa0f\",\"components_input-icon_index.md\":\"03605b44\",\"components_input-number_index.md\":\"75cb181b\",\"components_input_index.md\":\"399db2a5\",\"components_layout_index.md\":\"bd89a2a7\",\"components_list_index.md\":\"398a7889\",\"components_loading_index.md\":\"86c25c88\",\"components_mention_index.md\":\"4e5fcead\",\"components_menu_index.md\":\"5e7b2a2a\",\"components_message_index.md\":\"288b49b1\",\"components_modal_index.md\":\"6d985802\",\"components_multi-auto-complete_index.md\":\"d7dd7812\",\"components_nav-sprite_index.md\":\"59326b1c\",\"components_notification_index.md\":\"17d66bf4\",\"components_overlay_index.md\":\"b3c2d8b1\",\"components_overview_index.md\":\"4f4893a2\",\"components_pagination_index.md\":\"fa43e1ee\",\"components_panel_index.md\":\"78140495\",\"components_popover_index.md\":\"e061fad6\",\"components_progress_index.md\":\"f99bb298\",\"components_quadrant-diagram_index.md\":\"5b863b4f\",\"components_radio_index.md\":\"1569e619\",\"components_rate_index.md\":\"8ed5b018\",\"components_read-tip_index.md\":\"65f3a3e8\",\"components_result_index.md\":\"5a0e2c71\",\"components_ripple_index.md\":\"e22eb85c\",\"components_search_index.md\":\"a6ca9673\",\"components_select_index.md\":\"14f5b72d\",\"components_skeleton_index.md\":\"87cfbcd2\",\"components_slider_index.md\":\"c3e69a49\",\"components_splitter_index.md\":\"7b49b977\",\"components_statistic_index.md\":\"699289db\",\"components_status_index.md\":\"9b3ee9c1\",\"components_steps-guide_index.md\":\"4d707f63\",\"components_steps_index.md\":\"75686d75\",\"components_sticky_index.md\":\"839717a7\",\"components_switch_index.md\":\"05eb9888\",\"components_table_index.md\":\"1b34dab5\",\"components_tabs_index.md\":\"2612fccc\",\"components_tag-input_index.md\":\"d6c90326\",\"components_tag_index.md\":\"9d46f105\",\"components_textarea_index.md\":\"f6a86e66\",\"components_time-picker_index.md\":\"f8cff83c\",\"components_time-select_index.md\":\"38dfaf50\",\"components_timeline_index.md\":\"9b7ebcb4\",\"components_tooltip_index.md\":\"f9f4b384\",\"components_transfer_index.md\":\"7005ca26\",\"components_tree-select_index.md\":\"d122e78e\",\"components_tree_index.md\":\"2611f2c7\",\"components_upload_index.md\":\"65171bcd\",\"components_virtual-list_index.md\":\"6c90a3dd\",\"contributing_development-specification_api-demo-design_index.md\":\"fc9f2d3e\",\"contributing_development-specification_coding-specification_index.md\":\"af51d196\",\"contributing_development-specification_component-document_index.md\":\"a849b30c\",\"contributing_development-specification_directory-organization_index.md\":\"58197a6f\",\"contributing_development-specification_index.md\":\"1df9cfa5\",\"contributing_index.md\":\"7660b0ff\",\"en-us_components_alert_index.md\":\"96d493c1\",\"en-us_components_auto-complete_api-en.md\":\"004a35e9\",\"en-us_components_avatar_index.md\":\"dbe38f1a\",\"en-us_components_badge_index.md\":\"e48f2672\",\"en-us_components_button_index.md\":\"ec772540\",\"en-us_components_carousel_index.md\":\"3fec7a3f\",\"en-us_components_color-picker_index.md\":\"9fe5a01c\",\"en-us_components_comment_index.md\":\"2a0696ba\",\"en-us_components_editable-select_index.md\":\"73d1175f\",\"en-us_components_form_index.md\":\"65caae2d\",\"en-us_components_input_index.md\":\"136ae80e\",\"en-us_components_menu_index.md\":\"0bb24150\",\"en-us_components_message_index.md\":\"3fa5c7c8\",\"en-us_components_modal_index.md\":\"736ef31f\",\"en-us_components_panel_index.md\":\"4a1db166\",\"en-us_components_popover_index.md\":\"6b07f22f\",\"en-us_components_progress_index.md\":\"b364f914\",\"en-us_components_radio_index.md\":\"bddcefa7\",\"en-us_components_rate_index.md\":\"3940452b\",\"en-us_components_read-tip_index.md\":\"56a74b67\",\"en-us_components_result_index.md\":\"369abc51\",\"en-us_components_ripple_index.md\":\"b6d519cb\",\"en-us_components_search_index.md\":\"8745e3f6\",\"en-us_components_skeleton_index.md\":\"73d6ba05\",\"en-us_components_slider_index.md\":\"d6b0ecd3\",\"en-us_components_splitter_index.md\":\"ae397e5b\",\"en-us_components_statistic_index.md\":\"6f27cda4\",\"en-us_components_status_index.md\":\"e80d4793\",\"en-us_components_tag_index.md\":\"2388e235\",\"en-us_components_tooltip_index.md\":\"6013670f\",\"en-us_index.md\":\"45997edd\",\"en-us_quick-start_index.md\":\"5cb0ca76\",\"index.md\":\"d8afff32\",\"on-demand_index.md\":\"cc889f91\",\"quick-start_index.md\":\"2f52f012\",\"theme-guide_index.md\":\"4b58afef\"}")</script>
    <script type="module" async src="/assets/app.43ba01c1.js"></script>
    
  </body>
</html>